<template>
  <header style="border-bottom:1px solid black">
    <div>
      <el-button :icon="menuIcon" @click="handleMenu"></el-button>
    </div>

    <div class="my_headerR">

      <el-dropdown trigger="click" @command="handleCommand">
        <a href="#" class="el-dropdown-link">
          <el-button type="text" style="margin-right: 50px">{{ username }}</el-button>
        </a>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-plus">个人中心</el-dropdown-item>
          <el-dropdown-item command="logout" icon="el-icon-circle-plus">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
import {mapState, mapMutations} from 'vuex'

export default {
  name: "CommonHeader",
  data() {
    return {
      //userImage: require('../../../assets/ErHa.jpg'),
      username: '',
      screen: false,
    }
  }, computed: {
    ...mapState({
      menuState: state => state.Admin.menuState,
      menuIcon: state => state.Admin.menuIcon
    })
  }, methods: {
    ...mapMutations({
      handlerAsideMenu: 'activeMenu',
    }),
    handleCommand(command) {
      if (command === 'logout') {
        this.$axios.post('/user/logOut').then(res => {

          //this.$router.push({path:'/index'})
        });
      }
    },
    handleMenu: function () {
      this.handlerAsideMenu();
    },
    getUsername() {
      this.$axios.post('/user/getUsername').then(res => {
        if (res.code === 200) {
          this.username = res.data;
        }
      });
    }
  }, created() {
    this.getUsername()
  }
}
</script>

<style scoped>
header {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}

.my_headerR {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}

.userImg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

</style>
